<template>
  <!-- 侧边栏 -->
  <el-container style="height: 100%">
    <el-aside width="250px" class="aside">
      <p style="margin-top: 20px">编程智航</p>
      <!-- 搜索框 -->
      <el-input class="search" placeholder="搜索历史记录" suffix-icon="i-Search"></el-input>
    </el-aside>
    <el-container>
      <!-- 主要内容 -->
      <el-main>
        <el-row class="message-box">
          <el-col :span="1" :offset="5" style="display: flex; justify-content: center">
            <img src="@/assets/logo_black.png" width="40px" />
          </el-col>
          <el-col :span="12">
            <el-row>编程智航</el-row>
            <el-row>你好</el-row>
          </el-col>
        </el-row>
        <el-row class="message-box">
          <el-col :span="1" :offset="5" style="display: flex; justify-content: center">
            <img src="@/assets/logo_black.png" width="40px" />
          </el-col>
          <el-col :span="12">
            <el-row>编程智航</el-row>
            <el-row>你好</el-row>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="14" :offset="5" class="msg-input">
            <el-input v-model="temp" type="textarea" resize="none" placeholder="请输入您的问题" :autosize="{ maxRows: 15 }" />
            <el-button class="send-button"><i-Send /></el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
</template>
<script setup>
import { ref } from 'vue'
const temp = ref()
</script>
<style scoped>
.aside {
  background-color: rgba(95, 83, 203, 0.35);
  height: 100%;
  color: white;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.aside p {
  letter-spacing: 0.1em;
}
.search {
  width: 100%;
}
.message-box {
  margin-top: 20px;
}
.msg-input {
  position: relative; /* 确保父容器相对定位 */
  height: 100%; /* 或指定高度 */
}
.send-button {
  position: absolute;
  right: 0.5rem; /* 放置在最右侧 */
  bottom: 0.5rem; /* 与输入框底部对齐 */
}
:deep(.el-textarea) {
  position: absolute;
  bottom: 0; /* 将 textarea 定位到底部 */
  display: flex;
  left: 0;
}
:deep(.el-textarea__inner) {
  padding: 1.25rem 3.5rem 1rem 1rem;
  min-height: 4rem !important;
  font-size: 18px;
}
</style>
